<template>
    <div>
      <h2>流程管理</h2>
      <table>
        <thead>
          <tr>
            <th>流程编号</th>
            <th>流程名称</th>
            <th>发起时间</th>
            <th>当前状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="process in processList" :key="process.id">
            <td>{{ process.id }}</td>
            <td>{{ process.name }}</td>
            <td>{{ process.startTime }}</td>
            <td>{{ process.status }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        processList: [
          { id: 'P001', name: '采购审批流程', startTime: '2024-10-01 09:00', status: '待审批' },
          { id: 'P002', name: '报销审批流程', startTime: '2024-10-01 10:00', status: '已完成' },
          { id: 'P003', name: '请假审批流程', startTime: '2024-10-01 11:00', status: '审批中' }
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  </style>